<template>
    <div class="app-container merchantBox">
        <el-table v-loading="loading" :data="list" element-loading-text="Loading" border fit style="width: 1280px">

            <el-table-column align="center" label="手机号码" width="200">
                <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>

            <el-table-column label="商家名" width="400" align="center">
                <template slot-scope="scope">{{ scope.row.company }}</template>
            </el-table-column>

            <el-table-column label="账户级别" align="center" width="100">
                <template slot-scope="scope">
                    <span>
                        {{
                            scope.row.level ===  1
                            ?
                            '省级'
                            : scope.row.level === 2
                            ? '市级' :
                            scope.row.level === 3
                            ? '区、县级' :
                            scope.row.level === 4
                            ? '镇级' :
                            '村级'
                        }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="商家类型" align="center" width="250">
                <template slot-scope="scope">
                    <span>{{ scope.row.agent_type == 1 ? "代理" : "厂家"}}</span>
                </template>
            </el-table-column>

            <el-table-column label="审核状态" align="center" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.status == '0' ? '待审核' : scope.row.status == 1 ?'已通过' : '驳回' }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="create_time" label="操作"  width="140" fixed="right">
                <template slot-scope="scope">
                    <div class="optionAll">
                        <el-button
                                class="operation"
                                size="mini"
                                @click="submintProve(scope.row)"
                                plain
                        >查看</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
                class="pageBox"
                background
                layout="prev, pager, next"
                :total="pageTotal"
                :page-size="20"
                v-if="pageShow"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>

<script>
    export default {
        name: "agentCheck",
        components: {},
        data() {
            return {
                list: null,
                loading: false,
                pageTotal: 0,
                pageShow: false
            };
        },

        methods: {
            // 数据初始化
            defaultFn(currentPage) {
                this.loading = true;
                this.$http
                    .get("/agent/mill/apply/list", {
                        params: {
                            token: localStorage.getItem("user_token"),
                            id: localStorage.getItem("user_id"),
                            pageSize: 20,
                            page: currentPage
                        }}).then(response => {
                    if (response.data.status == 'success') {
                        this.list = response.data.data.list;
                        this.pageTotal = response.data.data.pagination.total;

                        if (this.pageTotal > 20) {
                            this.pageShow = true;
                        } else {
                            this.pageShow = false;
                        }

                        this.loading = false;
                    } else {
                        this.loading = false;
                    }
                })
                    .catch(error => {
                        console.log(error)
                        this.loading = false;
                    });
            },
            // 触发分页
            handleCurrentChange(val) {
                this.defaultFn(val);
            },

            submintProve(value){
                this.$router.push({name: 'checkAgentInfo', query:{agent_id: value.agent_id, mill_id: value.mill_id}})
            }
        },

        mounted() {
            this.defaultFn();
        }
    };
</script>


<style scoped lang='scss'>
    .merchantBox {
        margin: 40px;
        .addUser {
            margin-bottom: 20px;
        }
        .optionAll {
            float: left;
            display: flex;
            justify-content: space-between;
            .operation {
                width: 110px;
            }
        }
    }
    .pageBox {
        text-align: center;
        margin-top: 30px;
    }
</style>
